<template>
	<view class="content">
		<view class="OurBg">
			<view class="Img">
				<button plain class="img" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="image" src="../../static/img.png"></image>
				</button>
				<text class="iconfont icon-tianjia add"></text>
			</view>
		</view>
		<view class="NicknameInfo">
			<input @blur="getNickname" type="nickname" class="Nickname" value="你的昵称" />
		</view>
		<view class="PerList">
			<view class="PerItem">
				<view class="title">
					企业名称
				</view>
				<view class="input">
					<input cursor-spacing='10px' class="input_bor" type="text" placeholder="请输入企业全称"
						placeholder-style="color: rgba(134, 134, 134, 1)">
				</view>
			</view>
		</view>
		<view class="PerList">
			<view class="PerItem">
				<view class="title">
					联系人
				</view>
				<view class="input">
					<input cursor-spacing='10px' class="input_bor" type="text" placeholder="请输入联系人"
						placeholder-style="color: rgba(134, 134, 134, 1)">
				</view>
			</view>
		</view>
		<view class="PerList">
			<view class="PerItem">
				<view class="title">
					<view class="">
						联系电话
					</view>
					<view class="bot">
						<button open-type="getPhoneNumber" plain @getphonenumber='getphonenumber'
							class="button">获取</button>
					</view>

				</view>
				<view class="input">
					<input cursor-spacing='10px' class="input_bor" type="text" placeholder="请输入联系电话"
						placeholder-style="color: rgba(134, 134, 134, 1)">
				</view>
			</view>
		</view>
		<view class="PerList">
			<view class="PerItem">
				<view class="title">
					主营业务
				</view>
				<view class="input">
					<textarea cursor-spacing='10px' :auto-height='true' class="input_bor textarea" type="text"
						placeholder="请输入主营业务" placeholder-style="color: rgba(134, 134, 134, 1)">
				</textarea>
				</view>
			</view>
		</view>
		<view class="PerList">
			<view class="PerItem">
				<view class="title">
					地址
				</view>
				<view class="input picker input_bor">
					<picker mode='region' class="pickerWidth" @change="bindRegionChange" :value="index" :range="array">
						<view class="uni-input-center">{{address==''?'请选择':address}}</view>
					</picker>
					<view class="iconfont icon-zuoyou">
					</view>
				</view>
			</view>
		</view>
		<view class="PerList">
			<view class="PerItem">
				<view class="title">
					详细地址
				</view>
				<view class="input">
					<textarea cursor-spacing='10px' :auto-height='true' class="input_bor textarea" type="text"
						placeholder="请输入详细地址" placeholder-style="color: rgba(134, 134, 134, 1)">
				</textarea>
				</view>
			</view>
		</view>
		<view class="PerList">
			<view class="PerItem">
				<view class="title">
					所属园区
				</view>
				<view class="input picker input_bor">
					<picker class="pickerWidth" @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input" v-if="index==-1">{{index==-1?'请选择':array[index]}}</view>
						<view class="uni-input-center" v-else>{{index==-1?'请选择':array[index]}}</view>
					</picker>
					<view class="iconfont icon-zuoyou">
					</view>
				</view>
			</view>
		</view>
		<view class="pop_bot" @tap="Freeappointment">
			保存
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: ['中国', '美国', '巴西', '日本'],
				index: -1,
				address: '',
			}
		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.index = e.detail.value
			},
			// 地址
			bindRegionChange(e) {
				this.address = e.detail.value.toString()
				console.log(e.detail.value)
			},
			// 获取微信昵称
			getNickname(e){
				console.log(e.detail.value)
			},
			// 获取头像
			onChooseAvatar(e) {
				
				uni.uploadFile({
					url: this.baseUrl + 'api/user/upload', //仅为示例，非真实的接口地址
					filePath: e.detail.avatarUrl,
					name: 'file',
					header: {
						'content-type': 'application/json', //默认值
						Authorization: uni.getStorageSync('token')
					},
					success: (res1) => {
						if (JSON.parse(res1.data).code == 200) {
							this.from.avatarUrl = this.url + (JSON.parse(res1.data).data.src);
						} else {
							uni.showToast({
								title: JSON.parse(res1.data).msg,
								icon: 'none'
							});
			
						}
					}
				});
			
			},

		}
	}
</script>

<style lang="less" scoped>
	.content {
		padding-bottom: 30rpx;
	}

	.OurBg {
		background: url(../../static/bg.png) no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 350rpx;
		position: relative;

		.Img {
			padding-top: 80rpx;

			.img {
				padding-left: 0;
				padding-right: 0;
				margin-left: 40px;
				//
				border: 20rpx solid #fff;
				border-radius: 50%;
				width: 230rpx;
				height: 230rpx;
				box-shadow: 0px 16px 32px rgba(0, 0, 0, 0.09);
			}

			.image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 50%;
			}

			.add {
				position: absolute;
				font-size: 30rpx;
				color: #fff;
				background-color: rgba(212, 48, 48, 1);
				border-radius: 50%;
				padding: 10rpx;
				font-weight: bold;
				bottom: 60rpx;
				margin-left: 250rpx;
				z-index: 99;
			}
		}
	}

	.NicknameInfo {
		margin: 30rpx 60rpx;

		.Nickname {
			font-size: 52rpx;
			font-weight: 400;
			color: rgba(83, 88, 110, 1);
			height: 55rpx;
		}

	}

	.PerList {
		margin: 30rpx 60rpx;

		.PerItem {
			padding: 5rpx 0;

			.title {
				font-size: 24rpx;
				font-weight: 400;
				letter-spacing: 0.8px;
				line-height: 20px;
				color: rgba(134, 134, 134, 1);
				text-align: left;
				vertical-align: middle;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.button {
				padding: 0 !important;
				color: #fff;
				font-size: 22rpx;
				width: 136rpx;
				height: 42rpx;
				line-height: 42rpx;
				opacity: 1;
				border: none;
				border-radius: 50rpx;
				text-align: center;
				background: rgba(255, 163, 51, 1);
			}

			.input {
				font-size: 28rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 24px;
				color: rgba(166, 166, 166, 1);
				text-align: left;
				vertical-align: top;
				padding: 10rpx 0 0 0;
			}

			.picker {
				display: flex;
				align-items: center;
				width: 100%;

				.pickerWidth {
					width: 100%;
					text-align: left;
					color: rgba(134, 134, 134, 1);
				}
			}

			textarea {
				width: 100%;
				min-height: 35rpx !important;
			}

			.input_bor {
				padding: 5rpx 0;
				border-bottom: 1px solid rgba(208, 208, 208, 1);

			}
		}
	}

	.pop_bot {
		background: rgba(212, 48, 48, 1);
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		margin: 50rpx 50rpx;
		padding: 20rpx 0;
		text-align: center;
		text-align: center;
		border-radius: 50rpx;

	}
</style>